<template>
  <div class="self_adaption">
    <div class="g-container">
      <p class="main_text">分销管理</p>
      <!-- 搜索 -->
      <div class="g-search" style="padding-top: 12px">
        <!-- 信息区域 -->
        <div class="all_select" style="margin-top: 0">
          <!-- 分销员账号 -->
          <div class="input_valye">
            <span class="demonstration">分销员ID：</span>
            <input
              type="number"
              class="input"
              placeholder="请输入分销员ID"
              v-model="searchValue.id"
              style="width: 200px"
              @keyup.enter="search" />
          </div>
          <!-- 上级账号 -->
          <div class="input_valye">
            <span class="demonstration">上级ID：</span>
            <input
              type="number"
              class="input"
              placeholder="请输入上级ID"
              v-model="searchValue.parentId"
              style="width: 200px"
              @keyup.enter="search" />
          </div>
          <!-- 手机号 -->
          <div class="input_valye">
            <span class="demonstration">分销员手机号：</span>
            <input
              type="number"
              class="input"
              placeholder="请输入分销员手机号"
              v-model="searchValue.keyword"
              style="width: 200px"
              @keyup.enter="search" />
          </div>
          <!-- 账号状态 -->
          <div class="input_valye">
            <span class="demonstration">账号状态：</span>
            <el-select
              v-model="searchValue.status"
              class="m-2"
              placeholder="请选择账号状态"
              style="width: 200px"
              @change="search">
              <el-option v-for="item in status_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="cyr-flex">
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          :border="false"
          v-adaptive
          @expand-change="readInform"
          :row-key="getRowKeys"
          :expand-row-keys="expands"
          :show-overflow-tooltip="true"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F5F7FA !important',
          }">
          <el-table-column type="expand">
            <template #default="props">
              <div style="margin: 10px 30px">
                <p style="font-size: 16px; color: #000000; font-weight: 400; margin-bottom: 12px; text-align: left">
                  分销明细
                </p>
                <el-table
                  :data="childrenList"
                  :border="false"
                  :show-overflow-tooltip="true"
                  :header-cell-style="{
                    'text-align': 'center',
                    background: '#F5F7FA !important',
                  }">
                  <el-table-column label="层级" prop="hierarchy" align="center" />
                  <el-table-column label="层级人数" prop="person" align="center" />
                  <el-table-column label="比例关系" prop="Corp" align="center" />
                  <el-table-column label="直推收益金额" prop="Income" align="center">
                    <template #default="rows">
                      <span v-if="rows.row.hierarchy === 1">{{ rows.row.Income }}</span>
                      <span v-else>--</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="间推收益金额" prop="Income" align="center">
                    <template #default="rows">
                      <span v-if="rows.row.hierarchy === 2">{{ rows.row.Income }}</span>
                      <span v-else>--</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="分销员ID" align="center" />
          <el-table-column prop="username" label="分销用户名" align="center" />
          <el-table-column prop="parentId" label="所属上级ID" align="center">
            <template #default="item">
              <span v-if="item.row.parentId == 0">无</span>
              <span v-else>{{ item.row.parentId }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="parentName" label="所属上级" align="center">
            <template #default="item">
              <span v-if="item.row.parentName == null">无</span>
              <span v-else>{{ item.row.parentName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalChildrenCount" label="推广客户数" align="center" />
          <el-table-column prop="effectiveCount" label="有效客户数" align="center" />
          <el-table-column prop="teamBenefit" label="团队金额" align="center" />
          <el-table-column prop="status" label="账号状态" align="center">
            <template #default="item">
              <el-text v-if="item.row.status == 0" class="mx-1" type="warning"> • 正常</el-text>
              <el-text v-else-if="item.row.status == 1" class="mx-1" type="success"> • 冻结</el-text>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" class="operation">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" v-if="item.row.status == 1">解冻</el-button>
                <el-button size="small" class="none" v-else>冻结</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--        </div>-->
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="Number(total)"
          @change="pageChange" />
      </div>
    </div>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {RequestDistribution, RequestLookDistribution} from '@/api/path/index.js';
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const deliverShow = ref(false); //控制发货显示
const mask = ref(false); //控制遮罩层显示
const radio = ref('');
interface RestaurantItem {
  value: string;
  link: string;
}
const consolidateOrder = ref<any>([]);
const restaurants = ref<RestaurantItem[]>([]);
const loadAll = () => {
  return consolidateOrder.value;
};
// 挂载
onMounted(async () => {
  requestDistribution();
  restaurants.value = loadAll();
});

const requestDistribution = async () => {
  const a = await RequestDistribution(searchValue.value);
  if (a.msg == '操作成功！') {
    tableData.value = a.resultObj.agents;
    total.value = a.resultObj.count;
  }
};
// 搜索参数
const searchValue = ref({
  id: '',
  parentId: '',
  status: '',
  keyword: '',
  page: 1,
  rows: 10,
});
/**
 * 状态选择器
 */
const status_options = [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '冻结',
  },
  {
    value: 2,
    label: '员工离职',
  },
];
/**
 * 搜索
 */
const search = async () => {
  searchValue.value.page = 1;
  requestDistribution();
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    id: '',
    parentId: '',
    status: '',
    keyword: '',
    page: 1,
    rows: 10,
  };
  requestDistribution();
  radio.value = '0';
};

/**
 * 只展示单条
 */
const expands = ref<any>([]);
const childrenList = ref<any>([]);
const readInform = async (row: any, expandedRows: any) => {
  if (expandedRows.length != 0) {
    expands.value = [];
    if (row) {
      expands.value.push(row.id);
      const a = await RequestLookDistribution(row.id);
      if (a.msg == '操作成功！') {
        childrenList.value = [
          {
            hierarchy: 1,
            person: a.resultObj.firstCount,
            Corp: (a.resultObj.firstCorp).toFixed(0)+ '%',
            Income: a.resultObj.firstIncome,
          },
          {
            hierarchy: 2,
            person: a.resultObj.secondCount,
            Corp: (a.resultObj.secondCorp).toFixed(0)+ '%',
            Income: a.resultObj.secondIncome,
          },
        ];
      }
      console.log('打开当前行', row);
    }
  } else {
    expands.value = [];
  }
};

const getRowKeys = (row: any) => {
  return row.id; //这里看这一行中需要根据哪个属性值是id
};

/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestDistribution();
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  deliverShow.value = false;
  mask.value = false;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.g-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.order {
  .title {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 40px;

    .head_img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #e2ebfa;
    }

    .user_mes_top {
      display: flex;
      flex: 1;
      margin-left: 20px;
      flex-wrap: wrap;
      font-size: 14px;
      color: #9e9e9e;

      .p_text {
        width: 100%;
        line-height: 22px;
        display: flex;
        align-items: center;
      }

      .user_top_name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        line-height: 32px;
      }
    }

    .title_right {
      width: 100px;
      height: 30px;
      line-height: 30px;
      color: #409eff;
      border: 1px solid #409eff;
      border-radius: 5px;
      font-size: 15px;
      text-align: center;

      .el-icon {
        margin-right: 5px;
      }
    }
  }
}

::v-deep .el-drawer__body {
  padding: 0 !important;
}

.table {
  padding: 20px;
  height: calc(100% - 300px);
}

.table :deep(.el-table__cell) {
  text-align: center;
}

::v-deep .el-radio-group {
  width: 100% !important;
  background: pink !important;
}

::deep(.el-radio-group) {
  width: 100% !important;
  background: pink !important;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

::v-deep .el-drawer.rtl {
  background: #f5f9ff !important;
  width: 750px !important;
}

.close_order :deep(.is-finish .el-step__line) {
  background: #f57373;
}

.order_edit {
  position: fixed;
  width: 40%;
  height: 50%;
  background: #fff;
  z-index: 300;
  top: 25%;
  left: 25%;
  overflow: scroll;

  .el-form {
    position: relative;
    z-index: 350;
    padding: 20px 50px;

    .el-form-item {
      position: relative;
      z-index: 400;

      .el-input {
        position: relative;
        z-index: 700;
      }
    }
  }
}

.el-table .warning-row {
  background: #44a2ff !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  z-index: initial !important;
}
</style>
